<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
  <title>商品列表</title>
  <link rel="icon" id="favicon" href="//g.alicdn.com/dingding/web/0.2.6/img/oldIcon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../css/goodsList.css">
  <script src="../js/rem.js"></script>
  <script src="../js/zepto.js"></script>
  <script src="../js/detect.js"></script>
  <script src="../js/iscroll-probe.js"></script>
</head>
<body>
<div id="app">
  <!-- 1、头部 -->
  <div class="tap-warps">
    <div class="tap-items active" data-index="0">综合</div>
    <div class="tap-items" data-index="1">销量</div>
    <div class="tap-items" data-index="2">价格</div>
  </div>
  <div class="bd-1px"></div>
  <!-- 2、列表部分,滚动容器 -->
  <div class="goods-list-wrap">
    <!-- 滚动容器的第一个子元素，其中的元素可以上下滚动 -->
    <div class="goods-list">
      <div class="goods">
        <!--左边的图片-->
        <div class="img-wrap">
          <img src="http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg" alt="">
        </div>
        <!--右边的详情-->
        <div class="info-wrap">
          <div class="goods-name">创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）</div>
          <div class="goods-price">$19999</div>
        </div>
      </div>
      <div class="goods">
        <!--左边的图片-->
        <div class="img-wrap">
          <img src="http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg" alt="">
        </div>
        <!--右边的详情-->
        <div class="info-wrap">
          <div class="goods-name">创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）</div>
          <div class="goods-price">$19999</div>
        </div>
      </div>
      <div class="goods">
        <!--左边的图片-->
        <div class="img-wrap">
          <img src="http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg" alt="">
        </div>
        <!--右边的详情-->
        <div class="info-wrap">
          <div class="goods-name">创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）</div>
          <div class="goods-price">$19999</div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  function tapsClick() {
    //1、获得所有class='tap-items'的元素
    let tapItems = $('.tap-items');
    //2、所有的tap-items绑定点击事件
    tapItems.click(function(e) {
      //3、通过被点击的元素的下标
      let index = $(this).data('index');
      //4、删除所有tap-items的active类样式
      tapItems.removeClass('active');
      //5、给被点击的元素添加激活属性
      $(tapItems[index]).addClass('active');
      //6、根据index的不同，在页面渲染不同的内容
      $('.goods-list-wrap').html(index);
    });
  }

  /**
   * 页面加载时，发起数据的请求，在页面渲染数据
   * @param pagenum 页码
   * @param pagesize 一页几条
   */
  function getGoodsList(pagenum, pagesize) {
    //如果要让当前异步操作返回需要的结果，必须设置同步操作
    let object = null;
    //设置异步操作为同步
    $.ajaxSettings.async = false;
    $.ajax({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      type: 'GET',
      data: { pagenum, pagesize },
      success(res) {
        object = res.message.goods;
      },
      error(err) {
        object = err
      }
    });
    return object;
  }

  /**
   * 拼接数组到页页面
   * @param arr
   */
  function appendElement(arr) {
    let goodsList = $('.goods-list');
    goodsList.empty();
    let count = 0;
    arr.forEach(function(item, index) {
      count++;
      if (item.goods_small_logo === '') {
        item.goods_small_logo = 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'
      }
      let goods = `
        <div class="goods">
        <!--左边的图片-->
        <div class="img-wrap">
          <img src="${item.goods_small_logo}" alt="">
        </div>
        <!--右边的详情-->
        <div class="info-wrap">
          <div class="goods-name">${item.goods_name}</div>
          <div class="goods-price">￥${item.goods_price}</div>
        </div>
      </div>
      `;
      goodsList.append(goods);
    });
  }

    Zepto(function($) {
      document.addEventListener('touchmove', function(e) {
        e.preventDefault();
      }, { passive: false });

      tapsClick();
      let arr = getGoodsList(1, 50);
      appendElement(arr);
      let scroll = new IScroll('.goods-list-wrap', {
        mouseWheel: true,
        scrollbars: true,
        fadeScrollbars: true,
        probeType: 3
      });
    });
</script>
</body>
</html>
